<template>
  <div class="container2">
    <!-- 操作记录dialog-->
    <el-dialog
      :title="title"
      width="864px"
      :close-on-click-modal="false"
      v-dialogDrag
      :visible.sync="viewVisible"
      class="tableDialog adjustDialogHeight"
    >
      <el-table
        size="mini"
        v-loading="loading"
        :data="tableData"
        style="width: 100%;"
        border
        :header-cell-style="{
          'background-color': '#eeeeee !important',
        }"
        :row-class-name="tableRowClassName"
      >
        <el-table-column type="index" label="序号" width="60">
        </el-table-column>
        <el-table-column prop="createDate" label="操作时间" min-width="160"> </el-table-column>
        <el-table-column prop="createBy.loginName" label="操作人" min-width="100"> </el-table-column>
        <el-table-column prop="operateType" label="动作" min-width="100">
          <template slot-scope="scope">
            {{$dictUtils.getDictLabel("cardModifiedType", scope.row.operateType, "")}}
          </template>
        </el-table-column>
        <el-table-column prop="operateOld" label="修改前" min-width="170">
          <template slot-scope="scope">
            <div v-if="!(scope.row.operateOld === undefined)">
              <p v-if="scope.row.operateOld.cardUsage !== undefined">卡用途：{{scope.row.operateOld.cardUsage}}</p>
              <p v-if="scope.row.operateOld.truckNumber !== undefined">车牌号：{{scope.row.operateOld.truckNumber}}</p>
              <p v-if="scope.row.operateOld.driverName !== undefined">司机姓名：{{scope.row.operateOld.driverName}}</p>
              <p v-if="scope.row.operateOld.driverPhone !== undefined">司机电话：{{scope.row.operateOld.driverPhone}}</p>
              <p v-if="scope.row.operateOld.driverIdCard !== undefined">司机证件号：{{scope.row.operateOld.driverIdCard}}</p>
              <p v-if="scope.row.operateOld.payeeName !== undefined && scope.row.operateOld.cardUsage === 2">车主姓名：{{scope.row.operateOld.payeeName}}</p>
              <p v-if="scope.row.operateOld.payeeIdCard !== undefined && scope.row.operateOld.cardUsage === 2">车主证件号：{{scope.row.operateOld.payeeIdCard}}</p>
              <p v-if="scope.row.operateOld.payeeName !== undefined && scope.row.operateOld.cardUsage === 1">结算人姓名：{{scope.row.operateOld.payeeName}}</p>
              <p v-if="scope.row.operateOld.payeeIdCard !== undefined && scope.row.operateOld.cardUsage === 1">结算人证件号：{{scope.row.operateOld.payeeIdCard}}</p>
              <p v-if="scope.row.operateOld.payMoney !== undefined">实收卡费：{{scope.row.operateOld.payMoney}}</p>
              <p v-if="scope.row.operateOld.remark !== undefined">备注：{{scope.row.operateOld.remark}}</p>
            </div>
            <div v-else>--</div>
          </template>
        </el-table-column>
        <el-table-column prop="operateNew" label="修改后" min-width="170">
          <template slot-scope="scope">
            <div v-if="!(scope.row.operateNew === undefined)">
              <p v-if="scope.row.operateNew.cardUsage !== undefined">卡用途：{{scope.row.operateNew.cardUsage}}</p>
              <p v-if="scope.row.operateNew.truckNumber !== undefined">车牌号：{{scope.row.operateNew.truckNumber}}</p>
              <p v-if="scope.row.operateNew.driverName !== undefined">司机姓名：{{scope.row.operateNew.driverName}}</p>
              <p v-if="scope.row.operateNew.driverPhone !== undefined">司机电话：{{scope.row.operateNew.driverPhone}}</p>
              <p v-if="scope.row.operateNew.driverIdCard !== undefined">司机证件号：{{scope.row.operateNew.driverIdCard}}</p>
              <p v-if="scope.row.operateNew.payeeName !== undefined && scope.row.operateNew.cardUsage === 2">车主姓名：{{scope.row.operateNew.payeeName}}</p>
              <p v-if="scope.row.operateNew.payeeIdCard !== undefined && scope.row.operateNew.cardUsage === 2">车主证件号：{{scope.row.operateNew.payeeIdCard}}</p>
              <p v-if="scope.row.operateNew.payeeName !== undefined && scope.row.operateNew.cardUsage === 1">结算人姓名：{{scope.row.operateNew.payeeName}}</p>
              <p v-if="scope.row.operateNew.payeeIdCard !== undefined && scope.row.operateNew.cardUsage === 1">结算人证件号：{{scope.row.operateNew.payeeIdCard}}</p>
              <p v-if="scope.row.operateNew.payMoney !== undefined">实收卡费：{{scope.row.operateNew.payMoney}}</p>
              <p v-if="scope.row.operateNew.remark !== undefined">备注：{{scope.row.operateNew.remark}}</p>
            </div>
            <div v-else>--</div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="page.pageSize"
        :current-page="page.pageNo"
        layout="total,prev, pager, next"
        :total="page.total"
      >
      </el-pagination>
    </el-dialog>
  </div>
</template>
<script>
import {
  getList
} from '@/api/truck/cardModified/cardModified.js'
export default {
  components: {
  },
  data () {
    return {
      page: { total: 0, pageSize: 10, pageNo: 1 },
      method: '',
      title: '',
      loading: false,
      tableData: [],
      recordForm: {
        cardReristerId: '',
        operateType: '',
        operateReason: '',
        operateOld: '',
        operateNew: '',
        operateState: '',
        id: ''
      },
      editVisible: false,
      viewVisible: false
    }
  },
  methods: {
    init (method, row) {
      if (method === 'send') {
        this.viewVisible = true
        this.recordForm.cardReristerId = row.cardRegisterId
        this.getList(this.page, '', '', this.recordForm.cardReristerId)
        this.title = '操作记录'
      }
    },
    getList (params, orderName, orderByAORC, cardReristerId) {
      this.loading = true
      getList({
        pageSize: params.pageSize,
        pageNo: params.pageNo,
        orderBy: orderName,
        orderByAORC: orderByAORC,
        cardReristerId: cardReristerId
      }).then(({data}) => {
        if (data.code === '200') {
          this.tableData = data.result.list
          this.page.total = data.result.count
          this.tableData.forEach(row => {
            if (!(row.operateOld === undefined)) {
              row.operateOld = JSON.parse(row.operateOld)
            }
            if (!(row.operateNew === undefined)) {
              row.operateNew = JSON.parse(row.operateNew)
            }
          })
        }
        this.loading = false
      })
    },
    handleSizeChange () {},
    // 当前页改变
    handleCurrentChange (e) {
      this.page.pageNo = e
      this.getList(this.page, '', '', this.recordForm.cardReristerId)
    },
    close (type) {
      if (type === 'edit') {
        this.editVisible = false
        return
      }
      this.viewVisible = false
    },
    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      } else {
        return 'success-row'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.el-table .success-row {
  background: #f0f9eb;
}
::v-deep .el-table .warning-row {
  background: #f7f7f7;
}
</style>
